<template>
    <div class="hot-title">
          <h2>热门话题</h2>
          <div class="list">
              <div class="item" v-for='item in list' :key='item.id'>
                  <span class="hot">{{item.hot}}</span>
                    <i class="el-icon-magic-stick"></i>
                 <a href="javascript:;">{{item.title}}</a>
              </div>
          </div>
    </div>
</template>

<script>
export default {
    name : 'HotTitle',
    data(){
        return{
            list :[
                {
                id:'001',
                hot:99999,
                title: 'T楼送书活动又开始 啦！！！回帖编程书籍拿回家！（已结束）'
            },
              {
                id:'002',
                hot:8888,
                title:"18岁，19岁，年轻人，熬灵魂，都想整夜不睡"
            },
              {
                id:'003',
                hot:5555,
                title: '如果有一天，你会不会来看我啊，看大雪如何衰老的，我的眼睛如何被融化'
            }
            ,  {
                id:'004',
                hot:4444,
                title: '情人总是分分呵呵，而我们却越爱越深，认识你，让我的世界，如此'
            }
            ,  {
                id:'005',
                hot:3434,
                title: '如果再见你，有是怎样的情形，会不会将你再次拥进我怀里'
            },
              {
                id:'006',
                hot:2626,
                title: '我的生活和希望，总是向违背，我和你是河两岸'
            },
              {
                id:'007',
                hot:2525,
                title: '回忆是真的，你是假的，没什么因果，一百年前，你不是你'
            },  {
                id:'008',
                hot:1616,
                title: '如果说你是海上的烟火，我是浪花的得到。。。。'
            },
              {
                id:'009',
                hot:1111,
                title: '谢谢你带我来，看日落，看鬼怪，看一看只闻不见的精彩'
            },
            {
                id:'010',
                hot:1111,
                title: '老子明天不上课，怎么玩都不睡，'
            },
            {
                id:'011',
                hot:1010,
                title: '答应我，谁先脱单谁是狗哦~~~！！！'
            },
             {
                id:'012',
                hot:1000,
                title: '我再说一遍,我也很想有女人搞我，但我无人问津，很丢脸欸'
            }
            ]
        }
    }
}
</script>

<style>
.hot-title>h2{
    background: #fbfbfb;
    border-bottom: 1px solid #f0f0f0;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    margin: 0;
    padding-left: 15px;
}
.hot-title .list{
    background: #fff;
}
.hot-title .list .item{
    display: inline-block;
    max-width: 100%;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    border-bottom: 1px dotted #f2f2f2;
}
.item a{
    color: #999;
    font-size: 14px;
}
.item span{
    float: right;
    font-style:oblique;
}
.item i{
    color: red;
}
</style>